.matching-rule-view {
  @apply rounded overflow-hidden;
  border: 1px solid #edeef0;
  &__top {
    @apply flex px-4 py-2.5 gap-x-4 text-sm/22px text-4 font-semibold border-b-1 border-b-solid border-color-[#F3F4F7];
  }
  &__body {
    @apply  flex flex-col gap-y-4;
    .add-group {
      @apply flex items-center justify-center rounded-[5px] mt-4 cursor-pointer;
      border: 1px dashed #dbdde2;
      transform: translateY(-20px);
      span {
        @apply ml-1.5;
      }
    }
  }

  &__footer {
    @apply h-12 flex-center border-t-1 border-t-solid border-color-[#F3F4F7];
  }

  .matching-group {
    @apply relative;
    .container{
      @apply px-4 py-2;
    }
    .footer{
      @apply h-12 flex-center border-t-1 border-t-solid border-color-[#F3F4F7];
    }
    .or {
      @apply mt-4 flex items-center justify-center select-none w-[40px] h-[22px] bg-[#F7F8FA] text-[#868d9d] text-[12px] rounded;
      border: 1px solid #dbdde2;
      &::after {
        @apply h-0 absolute left-12;
        width: calc(100% - 50px);
        border-top: 1px dashed #dbdde2;
        content: "";
      }
    }
  }

  .matching-rule {
    @apply mb-4 !flex flex-row gap-x-4 items-start ;
    &:last-child {
      @apply m-0;
    }
    .arco-form-item {
      @apply relative m-0 w-fit;
      &:last-child {
        @apply mr-0;
      }
      .a-select,
      .a-input {
        @apply w-full;
      }
      .error-msg {
        @apply absolute left-0  text-xs/5 text-[red];
        bottom: -72%;
      }
      .arco-select{
        .arco-tag {
          font-weight: 400;
        }
      }
    }
    .action {
      .a-button {
        @apply m-0;
      }
    }
    :deep(.a-select-tags-wrapper.has-prefix) {
      @apply flex items-center flex-wrap;
    }
    :deep(.a-select__tags) {
      max-width: 100% !important;
      .a-select-tags-wrapper {
        width: 95%;
        height: auto;
        max-height: 84px;
        overflow-y: scroll;
        &::-webkit-scrollbar {
          width: 4px;
        }
        &::-webkit-scrollbar-thumb {
          background: #ddd;
          border-radius: 50px;
        }
      }
    }
    .a-select__input {
      // display: none;
    }
    .a-button {
      &:focus {
        color: #606266;
        border-color: #dcdfe6;
        background: #fff;
      }
    }
  }
}
